<template>
    <el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#fff">
       <span class="title">
           <i class="el-icon-user"></i>
           <span>宠物商店管理系统</span>
       </span>
        <span class="avatar">
        <el-avatar  @error="errorHandler"
                :src="url" ></el-avatar>
        </span>
        <el-submenu index="2" class="submenu">
            <!-- <template slot="title">{{user.userRealName}}</template> -->
            <template slot="title">管理员</template>
            <router-link to="/index" style="text-decoration: none">
            <el-menu-item  index="2-1">回到首页</el-menu-item>
            </router-link>
            <router-link to="/personal" style="text-decoration: none">
            <el-menu-item  index="2-2">个人中心</el-menu-item>
            </router-link>
            <el-menu-item  index="2-3" @click="removeToken">
                    退出
            </el-menu-item>
        </el-submenu>
    </el-menu>
</template>

<script>
    import * as userMessages from '../../api/userMessages'
    import Cookies from 'js-cookie'; //引入cookie操作依赖
    export default {
        name: "headerNav",
        data(){
            return{
                url: ''
            }
        },
        methods:{
            errorHandler() {
                return true
            },
            removeToken(){
              Cookies.remove('authorization')
              this.$router.push('/')
            },

        },
        created() {
            let userName= this.$store.getters.getUserName
            console.log(userName)
            let that =this
            userMessages.getOneMessages(userName).then(function (response) {
               that.url=response.data.data.avatarUrl
            })
        }
    }
</script>

<style scoped >
    .submenu {
       position: relative;
        left: 90%;
    }
    .title{
        position: absolute;
        top:20%
    }
    .avatar{
        position: absolute;
        right: 10%;
        top: 20%;
    }


</style>
